<template>
	<view style="width: 100%;">
		<view class="top-search">
			<uni-nav-bar backgroundColor="white" :fixed="true" color="black" borderColor="#efefef" status-bar title="待办事宜" rightIcon="plus" @clickRight="on_add"/>
			<view style="height: 3px;background-color: #efefef;"></view>
			<!-- 代办类型 -->
			<scroll-view class="tab-view" scroll-x="true">
				<view :class="['tab-view-item',tabIndex==0?'tab-view-item-active':'tab-view-item']" @tap="onTab(0)">
					<view>待我处理<text space="nbsp">&nbsp;{{dwcl}}</text></view>
				</view>
				<view :class="['tab-view-item',tabIndex==1?'tab-view-item-active':'tab-view-item']" @tap="onTab(1)">
					<view>我已处理<text space="nbsp">&nbsp;{{wycl}}</text></view>
				</view>
				<view :class="['tab-view-item',tabIndex==2?'tab-view-item-active':'tab-view-item']" @tap="onTab(2)">
					<view>我创建的<text space="nbsp">&nbsp;{{wcjd}}</text></view>
				</view>
			</scroll-view>
		</view>
		<view :style="'height:'+top_height+'px'"></view>
		<view style="height: 3px;"></view>
		<view class="card">
			<block  v-for="(item, index) in listInfo" :key="index">
				<view style="min-height: 90px;background-color: white;display: flex;flex-direction: row;">
					<view style="width: 3%;"></view>
					<view style="width: 94%;padding-top: 8px;color: #808080;">
						<view style="height: 2px;"></view>
						<view style="display: flex;flex-direction: row;">
							<view style="width: 60%;display: flex;flex-direction: row;align-items: center;">
								<view v-if="item.xmDbsyLx==1" style="display: flex;align-items: center;justify-content: center;"><image src="../../static/my-ico/lx1.png" style="width: 16px;height: 16px;"></image></view>
								<view v-if="item.xmDbsyLx==2" style="display: flex;align-items: center;justify-content: center;"><image src="../../static/my-ico/lx2.png" style="width: 16px;height: 16px;"></image></view>
								<view v-if="item.xmDbsyLx==3" style="display: flex;align-items: center;justify-content: center;"><image src="../../static/my-ico/lx3.png" style="width: 16px;height: 16px;"></image></view>
								<view> </view>
								<view style="color: #000;">{{item.sylx}}</view>
							</view>
							<view style="width: 40%;display: flex;flex-direction: row;justify-content: flex-end;align-items: center;">
								<view style="display: flex;align-items: center;justify-content: center;"><image src="../../static/my-ico/jbr.png" style="width: 18px;height: 18px;"></image></view>
								<view>{{item.jbrxm}}</view>
							</view>
						</view>
						<view style="height: 4px;"></view>
						<view style="width: 100%;">
							截止日期：{{item.jzrq}}
						</view>
						<view style="height: 4px;"></view>
						<view style="width: 100%;">
							交办日期：{{item.jbrq}}
						</view>
						<view v-if="tabIndex==2" style="height: 4px;"></view>
						<view v-if="tabIndex==2" style="width: 100%;">
							接收人：{{item.jsrxm}}
						</view>
						<view style="height: 4px;"></view>
						<view style="width: 100%;">
							交办事宜：{{item.dbsy}}
						</view>
						<view v-if="item.zt==0">
							<view style="height: 18px;"></view>
							<view v-if="tabIndex!=2"><button style="border: 1px solid #1E90FF;background-color: white;color: #1E90FF;height: 32px;line-height: 32px;" :data-dbsy="item.dbsy" :data-id="item.id" @tap="showPopup">完结登记</button></view>
							<view style="height: 18px;"></view>
						</view>
						<view v-if="item.zt==1">
							<view style="height: 4px;"></view>
							<view style="width: 100%;">
								完成日期：{{item.sjwcrq}}
							</view>
						</view>
						<view v-if="item.zt==1">
							<view style="height: 4px;"></view>
							<view style="width: 100%;">
								完成反馈：{{item.wjfk}}
							</view>
							<view style="height: 18px;"></view>
						</view>
						
					</view>
					<view style="width: 3%;"></view>
				</view>
				<view style="height: 6px;width: 100%;background-color: #efefef;"></view>
			</block>
		</view>
	</view>
	<!-- 这里是去处理的输入框 -->
	<uni-popup ref="popupRef" type="center">
		<view class="popup-content">
			<view class="popup-header">
				<uni-icons type="closeempty" size="30" @click="closePopup"></uni-icons>
			</view>
			<view class="popup-body">
				<textarea placeholder="请输入内容" v-model="inputValue"></textarea>
			</view>
			<view class="popup-footer">
				<button @click="submitInput">提交</button>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	var timerDownId = null,_self;
	var page=1,timerDownId = null;
	import utils from '../../common/utils'
	export default {
	  data() {
	    return {
			top_height:'20',
			//tab
			dwcl:0,
			wycl:0,
			wcjd:0,
			tabIndex:0,
			//待办明细
			listInfo:'',
			// 分页信息
			pageInfo:{
				
			},
			isOnMore:false,
			inputValue:'已完成。',
			wcid:'',
			dbsy:''
	    };
	  },
	  onReady() {
	  },
	  onPullDownRefresh() {
			console.info("下拉刷新开始...");
	        // 调用接口获取数据
	        this.initPage();
	  },
	  methods: {
		  on_add(){
			  uni.navigateTo({
			  	url:"/pages/dbsy/add"
			  })
		  },
		  //初始化数据，待办类型和事宜列表
		  initPage: async function () {
		  	this.$utils.showLoading("数据加载中...");
			page=1;
		  	let data = {
				tabIndex:this.tabIndex,
				curpage:page,
				pagesize:"6",
		  		timestamp:this.$utils.getTimestamp()
		  	};
		  	let enData = this.$utils.encrypt(JSON.stringify(data),uni.getStorageSync("userInfo").aesKey,uni.getStorageSync("userInfo").aesIv);
		  	let postData = {
		  		data:""+enData+""
		  	}
		  	try {
		  		let res = await this.$myRequest.post_token(getApp().globalData.getDbsyList,postData);   // 关键点
				console.info("initPage获取到的:"+JSON.stringify(res));
		  		this.$utils.hideLoading();
				// 停止下拉刷新动画
				uni.stopPullDownRefresh();
		  		if (res.code==0)
		  		{
					let a = JSON.parse(utils.decrypt(res.data,uni.getStorageSync("userInfo").aesKey,uni.getStorageSync("userInfo").aesIv));
					this.dwcl = a.tabSl[0];
					this.wycl = a.tabSl[1];
					this.wcjd = a.tabSl[2];
					this.pageInfo = a.xmDbsyListInfo.pageInfo;
					this.listInfo = a.xmDbsyListInfo.listInfo;
					console.info("initPage获取到的a:"+JSON.stringify(a));
		  		}
				else if (res.code==6){
					uni.setStorageSync('isLogin',false);
					//弹出登录页面
					uni.navigateTo({
						url: '/pages/login/login',
						animationType: 'pop-in',
						animationDuration: 200
					});
				}
		  		else{
		  			this.$utils.toast("数据加载失败！");
		  		}
		  	} catch (e) {  
		  		this.$utils.hideLoading();
		  		//console.info(e);
		  		this.$utils.toast("数据加载失败！");           
		  	}
		  },
		  // 加载更多
		  getMore:async function(){
		  	var nextPage = page+1;
		  	var totalPage = this.pageInfo.pageTotal;
		  	//console.info("触到底部，准备加载更多nextPage:"+nextPage);
		  	//console.info("触到底部，准备加载更多totalPage:"+totalPage);
		  	if (nextPage<=totalPage)
		  	{
				this.$utils.showLoading("数据加载中...");
		  		let data1 = {
		  			tabIndex:this.tabIndex,
		  			timestamp:this.$utils.getTimestamp(),
		  			curpage:""+nextPage+"",
		  			pagesize:"6"
		  		};
				//console.info("触到底部，准备加载更多>>>开始获取下页数据["+nextPage+"]，发送的["+JSON.stringify(data1)+"]");
		  		let enData = this.$utils.encrypt(JSON.stringify(data1),uni.getStorageSync("userInfo").aesKey,uni.getStorageSync("userInfo").aesIv);
		  		let postData = {
		  			data:""+enData+""
		  		}
		  		//console.info("触到底部，准备加载更多>>>postData["+JSON.stringify(postData)+"]");
		  		//console.info("发送的参数："+JSON.stringify(postData));
				try {
					let res = await this.$myRequest.post_token(getApp().globalData.getDbsyList,postData);   // 关键点
					//console.info("getMore获取到的:"+JSON.stringify(res));
					this.$utils.hideLoading();
					// 停止下拉刷新动画
					uni.stopPullDownRefresh();
					if (res.code==0)
					{
						let a = JSON.parse(utils.decrypt(res.data,uni.getStorageSync("userInfo").aesKey,uni.getStorageSync("userInfo").aesIv));
						//console.info("getMore获取到的a:"+JSON.stringify(a));
						for (var i = 0; i < a.xmDbsyListInfo.listInfo.length; i++) {  
							//console.info("新增的："+a.xmDbsyListInfo.listInfo[i]);
							this.listInfo.push(a.xmDbsyListInfo.listInfo[i])
						}
						page++;
					}
					else if (res.code==6){
						uni.setStorageSync('isLogin',false);
						//弹出登录页面
						uni.navigateTo({
							url: '/pages/login/login',
							animationType: 'pop-in',
							animationDuration: 200
						});
					}
					else{
						this.$utils.toast("数据加载失败！");
					}
					this.$utils.hideLoading();
					this.isOnMore = false;
				} catch (e) {  
					this.$utils.hideLoading();
					console.info(e);
					this.$utils.toast("数据加载失败！");  
					this.isOnMore = false;
				}
		  	}
		  	else{
		  		//console.info("触到底部，准备加载更多>>>没有更多数据");
		  		this.isOnMore = false;
		  		//this.$utils.toast("全部加载完成！");
		  	}
		  },
		  showPopup(event){
			console.info("event:"+JSON.stringify(event));
			var id = event.currentTarget.dataset.id;
			var dbsy = event.currentTarget.dataset.dbsy;
			this.wcid=id;
			this.dbsy=dbsy;
			this.$refs.popupRef.open();
		  },
		  closePopup() {
			this.$refs.popupRef.close();
		  },
		  onTab:function(index){
		 	this.tabIndex = index;
		 	this.initPage();
		 },submitInput:function(){
			 uni.showModal({
                title: '确认提交',
                content: '确定要提交当前内容吗？',
                success: (res) => {
                    if (res.confirm) {
                        // 用户点击了确定按钮
                        console.log("用户确认提交，提交的内容为："+this.inputValue+"涉及的待办事宜"+this.wcid);
						this.wjdj(this.wcid,this.inputValue);
                        // 这里可以添加实际的提交逻辑，比如调用接口
                    } else if (res.cancel) {
                        // 用户点击了取消按钮
                        console.log('用户取消了提交');
                    }
                }
            });
		 },
		 wjdj: async function (id,wjfk) {
		  	this.$utils.showLoading("数据提交中...");
			page=1;
		  	let data = {
				id:id,
				wjfk:wjfk,
		  		timestamp:this.$utils.getTimestamp()
		  	};
		  	let enData = this.$utils.encrypt(JSON.stringify(data),uni.getStorageSync("userInfo").aesKey,uni.getStorageSync("userInfo").aesIv);
		  	let postData = {
		  		data:""+enData+""
		  	}
		  	try {
		  		let res = await this.$myRequest.post_token(getApp().globalData.ddbsyWjdj,postData);   // 关键点
				console.info("initPage获取到的:"+JSON.stringify(res));
		  		this.$utils.hideLoading();
				// 停止下拉刷新动画
		  		if (res.code==0)
		  		{
					var that=this;
					uni.showToast({
						title: '登记完成！',
						icon: 'none',
						duration: 2000
					});
					setTimeout(()=>{
						this.$refs.popupRef.close();
						that.initPage();
					},2000);
		  		}
				else if (res.code==6){
					uni.setStorageSync('isLogin',false);
					//弹出登录页面
					uni.navigateTo({
						url: '/pages/login/login',
						animationType: 'pop-in',
						animationDuration: 200
					});
				}
		  		else{
		  			this.$utils.toast("数据提交失败！"+res.msg);
		  		}
		  	} catch (e) {  
		  		this.$utils.hideLoading();
		  		console.info(e);
		  		this.$utils.toast("数据提交失败！");           
		  	}
		  }
	  },onLoad() {
			_self = this;
		},onShow() {
			_self = this;
			this.isLogin = utils.checkLogin();
			console.info("获取到的登录状态："+this.isLogin);
			if (this.isLogin){
				this.phone = uni.getStorageSync("userInfo").phone;
				this.initPage();
			}else{
				//弹出登录页面
				uni.navigateTo({
					url: '/pages/login/login?sftc=1',
					animationType: 'pop-in',
					animationDuration: 200
				});
			}
		},onReady() {
			let that = this;
			/* 设置当前滚动容器的高，若非窗口的高度，请自行修改 */
			uni.getSystemInfo({
				success:(res)=>{
					let info = uni.createSelectorQuery().select(".top-search");
					info.boundingClientRect(function(data) { 
						//console.info("高度："+data.height);
						that.top_height = data.height;
					}).exec()
				}
			});
		},onReachBottom(){
			console.log("碰触到了底部，isOnMore:"+this.isOnMore);
			if (this.isOnMore) return;
			if (timerDownId != null) { //为防止回弹多次触发刷新
				clearTimeout(timerDownId)
			}
			this.isOnMore=true;
			timerDownId = setTimeout(() => {
				console.log("上拉加载");
				_self.getMore();
			}, 1000)
		}
	};
</script>

<style>
	page{
		background-color: #efefef;
		width: 100%;
	}
	.top-search{
		width: 100%;
		background-color: white;
		position: fixed;
		display: inline-block;
		color: #292933;
		z-index: 9999;
	}
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 200px;
		height: 200px;
	}
	/* app更新 */
	.download .logo {
	  width: 208rpx;
	}
	
	.download .upgrade {
	  position: relative;
	  background: #fff;
	  width: 468rpx;
	  min-height: 238rpx;
	  border-radius: 20rpx;
	}
	.download .logo image {
	  width: 208rpx;
	  position: absolute;
	  top: -80rpx;
	  left: 0;
	  right: 0;
	  margin: 0 auto;
	}
	.download .content {
	  padding-top: 80rpx;
	}
	.download .content .title {
	  text-align: center;
	  font-size: 30rpx;
	  font-weight: bold;
	}
	
	.download .content .container {
	  color: #666;
	}
	.download .content .container .descriptions {
	  padding: 0rpx 30rpx;
	  text-align: center;
	  font-size: 28rpx;
	}
	.download .content .container .details,
	.download .content .prpgroess {
	  padding: 16rpx 46rpx;
	  box-sizing: border-box;
	  font-size: 24rpx;
	}
	.download .content .prpgroess {
	  padding: 16rpx 22rpx;
	  margin: 20rpx 0;
	}
	.download .content .btn-group {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	
	.download .content .btn-group view {
	  width: 200rpx;
	  height: 68rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  margin: 14rpx;
	  font-size: 24rpx;
	  border-radius: 16rpx;
	  line-height: 1.5;
	}
	.download .content .btn-group view:last-child {
	  background: #ef5656;
	  color: #fff;
	}
	/* 顶部选项卡 */
	.tab-view{
		background-color: white;
		width: 100%;
		height: 88rpx;
		white-space: nowrap;
		/* border: 1px solid red; */
		line-height: 88rpx;
	}
	.tab-view-item{
		min-width: 110px;
		height: 138rpx;
		display: inline-block;
		color: #8a8999;
	}
	.tab-view-item-active{
		min-width: 110px;
		height: 138rpx;
		display: inline-block;
		line-height: 36px;
		color: #292933;
	}
	.tab-view-item-active view{
		text-align: center;
		min-width: 180px;
		color: #348fe4;
		border-bottom: 3px solid #348fe4;
		margin-left: 25%;
	}
	.tab-view-item view{
		text-align: center;
		min-width: 80px;
		margin-left: 25%;
	}
	.card{
		width: 100%;
		background-color: white;
		height: auto;
	}
	.card-item{
		width: 100%;
		background-color: white;
	}
	.card-item-1{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.card-item-2{
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.card-item-3{
		width: 100%;
		height: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-top: 1px solid #eeeeee;
	}
	.popup-content {
	    background-color: #fff;
	    border-radius: 8px;
	    padding: 20px;
	    width: 520rpx; /* 设置弹出框宽度为 80% */
	    margin: 0 auto; /* 水平居中 */
	}
	
	.popup-header {
	    display: flex;
	    justify-content: space-between;
	    align-items: center;
	    margin-bottom: 10px;
	}
	
	.popup-body textarea {
	    width: 100%;
	    height: 150px;
	    border: 1px solid #ccc;
	    padding: 10px;
	    box-sizing: border-box;
	}
	
	.popup-footer {
	    margin-top: 20px;
	    text-align: right;
	}
</style>	